<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入相关包依赖 -->
    <script src="./js/echarts.min.js"></script>
</head>

<body>
    <!-- 2---创建相关容器 -->
     <!-- 必须要指定默认的宽高值，否则容器大小为0，图标不显示 -->
    <div id="main" style="height: 500px;width: 500px;"></div>
    <!-- 默认容器通过canvas创建，由底层js所去渲染图像 -->
    <script>
        // 3--指定在什么容器中创建图像
        // let mycharts = document.getElementById("main");
        // // 4--对dom容器进行初始化，变为echarts容器
        // let charts = echarts.init(mycharts);
        let charts = echarts.init(document.getElementById("main"));
        // 5--配置相关的选项，即系列和组件
        let option = {
            title:{
                text:"大学生考勤",
                left:'center'
            },
            // x轴
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            // y轴
            yAxis: {
                type: 'value'
            },
            // 系列===配置什么类型的图标，以及的相关数据是什么
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar'///是一个折线图line，柱状图bar
                }
            ]
        };

        // 6--在echarts容器中配置相关的配置信息
        charts.setOption(option);

        // 请配置一个饼状图


        // 一次到位
        // echarts.init(document.getElementById("main")).setOption(option={

        // })
    </script>

</body>

</html>